<script setup lang="ts">
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
import { computed } from 'vue';
import type{ Ref } from 'vue';
const router=useRouter()
function backClick(){
    router.go(-1)
}
function cancelCilck(){
setTimeout(() => {
  issearch.value=false
  value.value=''
}, 0);
}
const value=ref('')
const issearch:Ref<boolean>=ref(false)
const lovearr=JSON.parse(localStorage.getItem('likearrays')||'')
console.log(lovearr[0]);
const classtype=computed(()=>{
  
  return issearch.value==true?"my-search2":"my-search"
})
const list =ref<any[]>(lovearr);

console.log(list);

function uploadMessage(){
  const namelist= ref<any[]>([]);
  console.log(value.value);

  for (let i = 0; i < lovearr.length; i++) {
    if(lovearr[i].proid.indexOf(value.value)!=-1){
      console.log(lovearr[i].proid);
      
      namelist.value.push(lovearr[i])
      
      console.log(namelist.value);
  
    }
    
  }
  list.value=namelist.value
  
  
}
</script>
<template>

    <main class="box">
        <header class="header">
      <slot  name="left">
      <div class="back">
        <van-icon color="#d6d6d6" size="20" @click="backClick" name="arrow-left" />
        <span @click="backClick">返回</span>
      </div>
 
      </slot>
      <span>收藏夹</span>
      <slot name="right"></slot>
  </header>
    <div class="content"> 
        <van-search 
:class="classtype" 
@click="issearch=true" 
v-model="value" 
@update:model-value="uploadMessage()" 
placeholder="搜索" 
show-action
background="rgba(255, 0, 0, 0)" 
shape="round" >
<template #action>
    <div v-show="issearch==true" class="cancel" @click="cancelCilck">取消</div>
  </template>
</van-search>
<div class="homecard" v-for="item in list" :key="item.proid">
<van-image class="cardimg" :src=item.img   alt="" />
<div class="cardtitle">拱北华山别墅</div>
<div class="cardcontet">{{ item.kind }}· {{item.bed }}居{{ item.bed }}床{{ item.bed }}人·123平米</div>
<div class="Price">￥{{item.price }}</div>
</div></div>
    </main>
</template>

<style lang="scss" scoped>
.header{
    color: black;
    background-color: white;
   .back{
    position: absolute;
    left: 0;
    top: 0;
    span{
        color: blue;
    }
   }
}
.homecard{
    width: 90%;
    height: 85px;
    margin: 30px auto;
    border-radius: 5px;
    box-shadow: 2px 4px  #eaeaea;
    position: relative;
    overflow: hidden;
    .cardimg{
        width: 130px;
        position: absolute;
        left: -10px;
        top: 0;
    }
    .cardtitle{
        font-size: 15px;
        position: absolute;
        left: 130px;
        top: 0;
    }
    .cardcontet{
        font-size: 13px;
        position: absolute;
        left: 130px;
        top: 30px;
    }
    .Price{
        font-size: 20px;
        position: absolute;
        left: 128px;
        bottom: 5px;
        color: #ff9b54;
        font-weight: 500;
    }
}

</style>
    